<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">应用名称</a>
      
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav me-auto">
          <li class="nav-item" v-if="isAuthenticated">
            <a class="nav-link" href="#">仪表盘</a>
          </li>
        </ul>
        
        <ul class="navbar-nav">
          <li class="nav-item" v-if="!isAuthenticated">
            <a class="nav-link" href="#" @click.prevent="navigateToLogin">登录</a>
          </li>
          
          <li class="nav-item" v-if="isAuthenticated">
            <span class="nav-link">欢迎，{{ username }}</span>
          </li>
          
          <li class="nav-item" v-if="isAuthenticated">
            <a class="nav-link" href="#" @click.prevent="logout">退出</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()

const isAuthenticated = computed(() => authStore.isAuthenticated)
const username = computed(() => authStore.username)

const navigateToLogin = () => {
  router.push('/login')
}

const logout = () => {
  authStore.logout()
  router.push('/login')
}
</script>